<template>
  <view class="card">
    <view class="header">
      <image src="@/static/icon10.png" class="img" />
      <text class="txt">{{ getText }}</text>
      <text class="tag">{{ dicts['stock_status'].map[modal.status] }}</text>
    </view>
    <view class="box">
      <slot></slot>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    modal: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapState({
      dicts: (state) => state.outWork.dicts,
    }),
    getText() {
      return this.modal.stackNo + '-' + this.modal.levelNo + '-' + this.modal.locationNo
    },
  },
  data() {
    return {}
  },
  components: {},
}
</script>

<style lang="scss" scoped>
.card {
  margin: 0 32rpx;
  background: linear-gradient(-90deg, #95c2f1, #1c60a4);
  border-radius: 24rpx;
  overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
    padding: 12rpx 20rpx;
    .img {
      width: 46rpx;
      height: 46rpx;
    }
    .txt {
      margin: 0 20rpx;
    }
    .tag {
      width: 68rpx;
      height: 34rpx;
      border-radius: 8rpx 0rpx 8rpx 0rpx;
      border: 1px solid #ffffff;
      font-size: 22rpx;
      text-align: center;
    }
  }
  .box {
    background: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
  }
}
</style>
